<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <!-- 语义化-区块 -->
    <header>
        <h1>HTML</h1>
        <p>
            <time pubdate datetime="2021-08-15"></time>
        </p>
    </header>

    <nav>
        <ol>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>
        </ol>
    </nav>

    <article>
        <h1>Weather forecast for Beijing</h1>
        <article>
            <h2>15 August 2021</h2>
            <p>Rain</p>
        </article>
        <article>
            <h2>16 August 2021</h2>
            <p>Periods of rain</p>
        </article>
        <article>
            <h2>17 August 2021</h2>
            <p>Heavy rain</p>
        </article>
    </article>

    <h1>Choosing an Apple</h1>
    <section>
        <h2>Introduction</h2>
        <p>This document provides a guide to help with the important task of choosing the correct Apple</p>
    </section>
    <section>
        <h2>Criteria</h2>
        <p>There are many different criteria to be considered when choosing an Apple
            -size,color,firmness,sweetness,tertness...</p>
    </section>

    <p>我今天要去参加字节跳动青训营</p>
    <aside>
        <h4> 青训营 </h4>
        <p>青训营是字节跳动技术团队发起的技术系列培训&人才选拔项目</p>
    </aside>

    <footer>
        <p>Posted by:ByteFE</p>
        <p><time pubdate datetime="2021-08-15"></time></p>
    </footer>
    <!-- 语义化-分组 -->
    <figure>
        <img src="cat.jpeg" alt="a cat">
        <figcaption>Cat Picture</figcaption>
    </figure>

    <blockquote cite="http://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly they'll go through anything</p>
    </blockquote>

    <dl>
        <dt>Firefox</dt>
        <dd>
            A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
        </dd>
    </dl>


    <img src="smiley.gif" alt="Smiley face">

    <picture>
        <source media="(min-width:600px)" srcset="mdn-logo-wide.png">
        <img src="mdn-logo-narrow.png" alt="MDN">
    </picture>

    <picture>
        <source srcset="xxx.webp" type="image/webp">
        <img src="xxx.jpg" decoding="async" loading="lazy">
    </picture>

    <video controls>
        <source src="/flower.webm" type="video/webm">
        <source src="/flower.mp4" type="video/mp4">
        Sorry,your browser doesn't support embedded videos.
    </video>

    <audio controls src="xxx.mp3">
        your browser does not support the <code> audio </code> element.
    </audio>

    <video src="friday.mp4">
        <!-- 字幕文件 -->
        <track default kind="captions" srclang="en" src="friday.vtt"/>
        sorry ,your browser does not support embedded video.
    </video>
</body>

</html>